<template>
  <div class="pjt-mt-report-view">

    <modules-title class="title-position" titleName="项目报告">

      <template slot="btn">
        <el-button
          v-hasPermi="{v:['xiangmu:baogao:add']}"
          type="primary" size="mini" @click="createReport">写报告</el-button>
      </template>

    </modules-title>

    <div class="pj-content">

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我创建的" name="create">

        </el-tab-pane>
        <el-tab-pane label="我收到的" name="receive">

        </el-tab-pane>
      </el-tabs>

      <div class="screen-view">

        <el-form
          ref="queryForm"
          :model="screenData"
          :inline="true"
          label-width="68px"
        >

          <el-form-item label="报告类型">
            <el-select
              v-model="screenData.type"
              placeholder="请选择类型"
              size="small"
              @change="typeChange"
            >
              <el-option label="周报" value="week"/>
              <el-option label="月报" value="month"/>
            </el-select>
          </el-form-item>

          <el-form-item label="选择周" v-if="screenData.type == 'week'">
            <el-date-picker
              v-model="screenData.week"
              type="week"
              format="yyyy 第 WW 周"
              @change="weekChange"
              placeholder="选择周">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="选择月" v-else>
            <el-date-picker
              v-model="screenData.month"
              type="month"
              @change="monthChange"
              placeholder="选择月">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="选择项目">
            <el-select v-model="screenData.project" placeholder="请选择项目" @change="projectChange">
              <el-option
                v-for="(item,index) in projects"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择人员" v-if="activeName == 'receive'">
            <el-select v-model="screenData.member" placeholder="请选择人员" @change="memberChange">
              <el-option
                v-for="(item,index) in members"
                :key="index"
                :label="item.member_name"
                :value="item.member_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>

            <!--            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>-->
            <el-button plain size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-table
          size="medium"
          :data="list"
          @row-click="tableRowClick"
          border>
          <el-table-column
            align="center"
            prop="member_name"
            label="报告类型">
            <template slot-scope="scope">
              <span v-if="scope.row.report_type == 'week'">周报</span>
              <span v-else>月报</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="department"
            label="报告周期">
            <template slot-scope="scope">
              <div v-if="scope.row.report_type == 'week'">
                <el-date-picker
                  v-model="scope.row.period"
                  type="week"
                  format="yyyy 第 WW 周"
                  readonly
                  disabled
                  prefix-icon=""
                  placeholder="选择周">
                </el-date-picker>
              </div>
              <div v-else>
                <el-date-picker
                  readonly
                  v-model="scope.row.period"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName == 'receive'"
            prop="creator_name"
            align="center"
            label="报告职员">
          </el-table-column>
          <el-table-column
            align="center"
            prop="created_at"
            label="提交时间">
          </el-table-column>
          <el-table-column
            prop="project_name"
            align="center"
            label="所属项目">
          </el-table-column>
          <el-table-column
            v-if="activeName == 'receive'"
            align="left"
            header-align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                v-hasPermi="{
                  v: ['xiangmu:baogao:comments'],
                  isF: checkComment(scope.row),
                }"
                size="medium"
                type="text"
                @click="commentClick(scope.row.id)">评论</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          style="display:flex;justify-content:flex-end;"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getListData"
        />
      </div>


    </div>

    <el-dialog
      v-if="dialogVisible"
      title="发表评论"
      :visible.sync="dialogVisible"
      width="600px"
      append-to-body
      :before-close="dialogClose">

      <div class="comment-view" style="display: flex">

        <span class="title" style="min-width: max-content;margin-right: 10px">评论内容</span>

        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>

      </div>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: "index",
        data:function () {
            return{
                total:0,
                pageSize:10,
                pageNum:1,
                dialogVisible:false,
                activeName:'create',
                textarea:'',
                list:[],
                screenData:{
                    type:'week',
                    period:'',
                    week:'',
                    month:'',
                    project:'',
                    member:''
                },
                projects:[],
                members:[],
                comment_id:'',
            }
        },
        mounted:function() {
            this.getListData();
            this.getProjectList();
            this.getMemberList()
        },
        beforeRouteEnter(to,from,next){
            to.params.refresh = from.params.refresh

            next()
        },
        activated:function(){
            if (this.$route.params.refresh){
                this.getListData()
            }
        },
        methods:{
            getProjectList:function(){
                this.$api.PROJECT_START_WORK_LIST_REPORT().then(res=>{
                    if (res.code == 200){

                        if (res.data.data){
                            res.data.data.forEach(item=>{
                                let phases = ""
                                if (item.project_phases_id == "1"){
                                    phases = "临床前研究"
                                }else{
                                    phases = "临床研究"
                                }
                                item.name = item.project_name + '(' + phases + ')'
                            })

                            this.projects = res.data.data;
                        }
                    }
                })
            },
            getMemberList:function(){
                this.$api.PROJECT_START_WORK_LIST_MEMBER().then(res=>{
                    if (res.code == 200){
                        this.members = res.data.data;
                    }
                })
            },
            tableRowClick:function(row, column, event){
                console.log(row, column, event)
                if (column.label != '操作'){
                    this.$router.push({name:'projectManagementReportDetail',query:{id:row.id}});
                }
            },
            getListData:function(){
                let data = {
                    period:this.screenData.period,
                    creator_id:this.screenData.member,
                    project_id:this.screenData.project,
                    report_type:this.screenData.type,
                    i_create:this.activeName == "create" ? 1 : 2,
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_START_WORK_REPORT_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.list = res.data.data;
                        this.total = res.data.total;
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            handleClick:function(val){
                this.pageNum = 1;
                this.getListData();
            },
            createReport:function () {
                this.$router.push({name:'projectManagementReportCreate',query:{}})
            },
            typeChange:function (val) {
                if (this.screenData.type == "week"){
                    this.screenData.period = this.screenData.week ? this.dealDateStr(new Date(this.screenData.week)) + " 00:00:00" : ""
                }else {
                    this.screenData.period = this.screenData.month ? this.dealDateStr(new Date(this.screenData.month)) + " 00:00:00" : ""
                }
                this.pageNum = 1;
                this.getListData();
            },
            handleQuery:function () {
                this.getListData();
            },
            resetQuery:function () {
                this.screenData.type = "week"
                this.screenData.member = "";
                this.screenData.project = "";
                this.screenData.week = "";
                this.screenData.month = "";
                this.screenData.period = "";
                this.getListData();
            },
            dialogClose:function(){
                this.dialogVisible = false;
            },
            checkComment:function(data){
                let index = data.member_id.findIndex(id=>id==this.$store.getters.userInfo.user.id)
                if (index != -1){
                    if (data.comment){
                        let ind = data.comment.findIndex(a=>a.creator_id == this.$store.getters.userInfo.user.id)
                        if (ind != -1){
                            return false
                        }else{
                            return true
                        }
                    }else {
                        return true;
                    }

                }else {
                    return false
                }
            },
            commentClick:function (id) {
                this.comment_id = id
                this.dialogVisible = true;
            },
            dialogConfirm:function () {
                if (!this.textarea){
                    this.$message.error("请输入评论")
                    return
                }
                let data = {
                    report_id:this.comment_id,
                    info:this.textarea
                }
                this.textarea = '';
                this.dialogVisible = false;

                this.$api.PROJECT_START_WORK_REPORT_CREATE_COMMENT(data).then(res=>{

                    if (res.code == 200){
                        this.getListData()
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err={

                })
            },
            projectChange:function(){
                this.pageNum = 1;
                this.getListData();
            },
            memberChange:function(){
                this.pageNum = 1;
                this.getListData();
            },
            monthChange:function(){

                if (this.screenData.month){
                    this.screenData.period = this.dealDateStr(new Date(this.screenData.month)) + " 00:00:00";
                }else{
                    this.screenData.period = ''
                }

                this.pageNum = 1;
                this.getListData();
            },
            weekChange(val) {
                console.log(this.screenData.week)
                if (this.screenData.week){
                    this.screenData.period = this.dealDateStr(new Date(this.screenData.week)) + " 00:00:00";
                }else{
                    this.screenData.period = ''
                }

                this.pageNum = 1;
                this.getListData();
            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
        }
    }
</script>

<style lang="scss">
  @import "../../../../assets/scss/views/projectManagement/report/list.scss";
</style>
